<template>
    <div v-if="baziData" class="gztips-box">
        <!-- 原局天干 -->
        <div class="gztipsbox-item">
            <div class="gztipsbox-item-label">原局天干<span>：</span></div>
            <div class="gztipsbox-item-value">
                <span v-if="yuanjuTiangan.length === 0">无</span>
                <template v-else>
                    <span v-for="(item, index) in yuanjuTiangan" :key="index">
                        {{ item }}<span v-if="index < yuanjuTiangan.length - 1"> | </span>
                    </span>
                </template>
            </div>
        </div>
        
        <!-- 原局地支 -->
        <div class="gztipsbox-item">
            <div class="gztipsbox-item-label">原局地支<span>：</span></div>
            <div class="gztipsbox-item-value">
                <span v-if="yuanjuDizhi.length === 0">无</span>
                <template v-else>
                    <span v-for="(item, index) in yuanjuDizhi" :key="index">
                        {{ item }}<span v-if="index < yuanjuDizhi.length - 1"> | </span>
                    </span>
                </template>
            </div>
        </div>
        
        <!-- 原局整柱 -->
        <div class="gztipsbox-item">
            <div class="gztipsbox-item-label">原局整柱<span>：</span></div>
            <div class="gztipsbox-item-value">
                <span v-if="yuanjuZhengzhu.length === 0">无</span>
                <template v-else>
                    <span v-for="(item, index) in yuanjuZhengzhu" :key="index">
                        {{ item }}<span v-if="index < yuanjuZhengzhu.length - 1"> | </span>
                    </span>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
    calculateTianganRelations, 
    calculateDizhiRelations, 
    calculateZhengzhuRelations 
} from '@/utils/relation-utils'

interface BaziData {
    year?: {
        stem?: string
        branch?: string
    }
    month?: {
        stem?: string
        branch?: string
    }
    day?: {
        stem?: string
        branch?: string
    }
    hour?: {
        stem?: string
        branch?: string
    }
}

interface Props {
    baziData: BaziData | null
}

const props = defineProps<Props>()

// 构建四柱数组（与 GanzhiRelations.vue 相同的格式）
const pillars = computed(() => {
    if (!props.baziData) return []
    return [
        { gan: props.baziData.year?.stem || '', zhi: props.baziData.year?.branch || '' },
        { gan: props.baziData.month?.stem || '', zhi: props.baziData.month?.branch || '' },
        { gan: props.baziData.day?.stem || '', zhi: props.baziData.day?.branch || '' },
        { gan: props.baziData.hour?.stem || '', zhi: props.baziData.hour?.branch || '' }
    ].filter(p => p.gan && p.zhi)
})

// 计算原局天干关系
const yuanjuTiangan = computed(() => {
    if (!props.baziData || pillars.value.length === 0) return []
    return calculateTianganRelations(pillars.value)
})

// 计算原局地支关系
const yuanjuDizhi = computed(() => {
    if (!props.baziData || pillars.value.length === 0) return []
    return calculateDizhiRelations(pillars.value)
})

// 计算原局整柱关系
const yuanjuZhengzhu = computed(() => {
    if (!props.baziData || pillars.value.length === 0) return []
    return calculateZhengzhuRelations(pillars.value)
})
</script>

<style scoped>
.gztips-box {
    margin: 16px;
    padding: 0;
}

.gztipsbox-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.gztipsbox-item:last-child {
    margin-bottom: 0;
}

.gztipsbox-item-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    min-width: 80px;
    flex-shrink: 0;
}

.gztipsbox-item-value {
    flex: 1;
    font-size: 14px;
    color: #1e293b;
    font-weight: 400;
    line-height: 1.6;
}
</style>
